<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';

import { StorageManager } from '@vben-core/shared/cache';

import { ElButton, ElDialog, ElDivider, ElMessage, ElTree } from 'element-plus';

import { catalogApi } from '#/api';

// import '~/assets/css/iconfont';

const props = defineProps({
  isCatalogTreeDialogShow: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['closeCatalogTreeDialog', 'confirmSavePath']);

const storageManager = new StorageManager({
  prefix: '',
  storageType: 'sessionStorage',
});

interface Tree {
  id: string;
  label: string;
  children: Tree[];
}
const { isCatalogTreeDialogShow } = toRefs(props);
const clickNode = reactive({
  obj: null as any,
});
const data = ref([] as Tree[]);
const rootCatalog = storageManager.getItem('rootCatalog');
onMounted(() => {
  catalogApi.getCatalogTree(rootCatalog as string).then((res: any) => {
    data.value = res;
  });
});
const closePreviewDialog = () => {
  emit('closeCatalogTreeDialog');
};
const confirmCatalog = async () => {
  // console.log(clickNode.obj);
  if (clickNode.obj) {
    const { id, label } = clickNode.obj;
    emit('confirmSavePath', { id, label });
    emit('closeCatalogTreeDialog');
  } else {
    ElMessage({
      type: 'error',
      message: '未选择文件夹',
    });
  }
};
const handleTreeNodeClick = (node?: any) => {
  // console.log(node);
  clickNode.obj = node;
};
</script>

<template>
  <div>
    <ElDialog
      class="dialog-title"
      v-model="isCatalogTreeDialogShow"
      width="15%"
      align-center
      @close="closePreviewDialog"
      destroy-on-close
      draggable
    >
      <template #header>
        <div class="my-header">
          <h4 style="color: rgb(48 45 45)">选择目录</h4>
        </div>
        <ElDivider style="padding: 0; margin: 0" />
      </template>
      <ElTree :data="data" @node-click="handleTreeNodeClick">
        <template #default="{ node }">
          <span>
            <el-icon style="width: 20px; height: 20px; padding-right: 0%">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-opened_folder" />
              </svg>
            </el-icon>
            {{ node.label }}
          </span>
        </template>
      </ElTree>
      <template #footer>
        <ElButton
          type="primary"
          round
          plain
          size="default"
          @click="confirmCatalog"
        >
          确定
        </ElButton>
        &nbsp;
        <ElButton
          type="primary"
          round
          plain
          size="default"
          @click="closePreviewDialog"
        >
          关闭
        </ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<style scoped>
:deep(.el-dialog) {
  border-radius: 20px;
}

.icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentcolor;
}

.my-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 20px;
  font-size: 18px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
